<template>
  <div class="content">
    <dv-border-box-8 class="sysFilesParent sysFiles">
      <div id="SysFile" class="sysFiles"></div>
    </dv-border-box-8>

    <div id="cpu" style="width: 700px;height: 500px"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    name: "welcome",
    data() {
      return {}
    },
    created() {
      this.getList();

    },
    methods: {
      // 获取服务监控数据
      getList() {
        this.api.getApi("/system/monitoring/get").then(res => {
          this.SysFile();
          this.cpu();
        });
      },

      // 系统磁盘信息
      SysFile() {
        let myChart = this.$echarts.init(document.getElementById('SysFile'), 'light');
        let option = {
          // backgroundColor: "#0f375f",
          title: {
            text: '系统磁盘信息',
            textStyle: {
              align: 'center',
              color: '#fff',
              fontSize: 20,
            },
            top: '5%',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          barWidth: 12,
          xAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: { //  改变x轴字体颜色和大小
              textStyle: {
                color: "#fff",
                fontSize: 14
              }
            }
          },
          yAxis: {
            type: 'category',
            // 纵坐标数据
            data: ['C盘', 'D盘', 'E盘', 'F盘'],
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: { //  改变y轴颜色
              lineStyle: {
                color: '#2c4054'
              }
            },
            axisLabel: { //  改变y轴字体颜色和大小
              //formatter: '{value} m³ ', //  给y轴添加单位
              textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 14  // 纵坐标字体大小
              }
            }
          },
          series: [{
            type: 'bar',
            name: " ####",
            barWidth: 20, // 控制柱图宽度
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "insideRight", //在上方显示
                  textStyle: { //数值样式
                    color: "#FFFFFF",
                    fontSize: 16,
                    fontWeight: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: 'rgba(24,144,255,1)'
                }, {
                  offset: 1,
                  color: 'rgba(24,144,255,0)'
                }]),
                barBorderRadius: 15
              }
            },
            // 数据
            // data: [19, 29, 39, 81, 29, 39]
            data: [
              {value: 1548, name: 'C盘',hhh:11,ss:22},
              {value: 735, name: 'D盘',hhh:11,ss:22},
              {value: 510, name: 'E盘',hhh:11,ss:22},
              {value: 434, name: 'F盘',hhh:11,ss:22},
            ]
          }
          ]
        };
        myChart.setOption(option);
      },

      // CPU
      cpu() {
        let myChart = this.$echarts.init(document.getElementById('cpu'), 'light');
        let option = {
          title: {
            text: '天气情况统计',
            subtext: '虚构数据',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: ['西凉', '益州', '兖州', '荆州', '幽州']
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [
                {value: 1548, name: '幽州'},
                {value: 735, name: '荆州'},
                {value: 510, name: '兖州'},
                {value: 434, name: '益州'},
                {value: 335, name: '西凉'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'red'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>
  .content {
    background-color: #333333;
  }

  .sysFilesParent {
    padding-left: 10px;
  }

  .sysFiles {
    width: 500px;
    height: 300px
  }

</style>
